<route>
{
  "meta":{
    "title":"数据审计",
    "showMenu":true,
    "serialNum": 20,
    "localism": "sys.data_audit"
  }
}
</route>
<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.account"
          :placeholder="$t('sys.input_operator_account')"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="queryData.model"
          :placeholder="$t('sys.input_business_model_code_or_name')"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-select
          style="width: 100%"
          v-model="queryData.operationType"
          :placeholder="$t('sys.choose_operation_type')"
          clearable
        >
          <el-option
            v-for="(label, code) in operationTypeEnum"
            :key="code"
            :value="code"
            :label="label"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="queryData.recordKey"
          :placeholder="$t('sys.input_data_record_id')"
          clearable
          :maxlength="28"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6" class="mt10">
        <el-date-picker
          style="width: 100%"
          v-model="queryData.beginTime"
          type="datetime"
          :placeholder="$t('sys.choose_start_time')"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="6" class="mt10">
        <el-date-picker
          style="width: 100%"
          v-model="queryData.endTime"
          type="datetime"
          :placeholder="$t('sys.choose_end_time')"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="6" class="mt10">
        <el-button type="primary" @click="loadData">{{
          $t("sys.query")
        }}</el-button>
        <el-button @click="handleReset">{{ $t("sys.reset") }}</el-button>
        <el-button
          class="retention-days"
          type="text"
          @click="handleRetentionDaysSetting"
          >{{ $t("sys.data_retention")
          }}<span class="retention-days__value">{{ retentionDays }}</span
          >{{ $t("sys.data_retention_unit") }}
          <el-tooltip effect="dark" :content="$t('sys.data_retention_days_tip')" placement="top">
          <i class="el-icon-question"></i>
          </el-tooltip>
        </el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column
        type="index"
        width="50"
        :label="$t('sys.serial_number')"
      />
      <el-table-column
        prop="username"
        :label="$t('sys.operator')"
        width="120"
      />
      <el-table-column prop="createBy" :label="$t('sys.account')" width="120" />
      <el-table-column prop="model" :label="$t('sys.business_model')">
        <template slot-scope="scope">
          {{ [scope.row.modelCode, scope.row.modelName] | codeName }}
        </template>
      </el-table-column>
      <el-table-column prop="serviceName" :label="$t('sys.business_service')">
        <template slot-scope="scope">
          {{ [scope.row.serviceKey, scope.row.serviceName] | codeName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="operationType"
        :label="$t('sys.operation_type')"
        width="150"
      >
        <template slot-scope="scope">
          {{ operationTypeEnum[scope.row.operationType] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="recordKey"
        :label="$t('sys.data_record_id')"
        width="120"
      />
      <el-table-column
        prop="callType"
        :label="$t('sys.trigger_behavior')"
        width="120"
      >
        <template slot-scope="scope">
          {{ behaviors[scope.row.callType] }}
        </template>
      </el-table-column>
      <el-table-column prop="createDate" :label="$t('sys.time')" width="150">
        <template slot-scope="scope">
          {{ scope.row.createDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="action" :label="$t('sys.operation')" width="100">
        <template slot-scope="scope">
          <span v-show="scope.row.operationType !== 'DELETE'">
            <el-button type="text" @click="handleDetail(scope.row.id)">{{
              $t("sys.details")
            }}</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
    <DetailForm ref="DetailForm" @ok="loadData()" />
    <RetentionDaysModal ref="RetentionDaysModal" />
  </div>
</template>

<script>
import {
  getHmservicedataupdatelogPageList,
  getHmservicedataupdatelogRetentiondays,
  putHmservicedataupdatelogRetentiondays,
} from "@/apis/paas/HmServiceDataUpdateLogController.js";
import DetailForm from "./__components__/DetailForm";
import RetentionDaysModal from "./__components__/RetentionDaysModal.vue";
import i18n from "../../../../i18n";
export default {
  name: "ServiceOperationsLog",
  components: { DetailForm, RetentionDaysModal },
  data() {
    return {
      loading: false,
      queryData: {},
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      total: 0,
      beginTime: "",
      endTime: "",
      behaviors: {
        USER_OPERATION: i18n.t("sys.user_operation"),
        API_CALL: i18n.t("sys.api_call"),
        JOB: i18n.t("sys.background_task_trigger"),
      },
      operationTypeEnum: {
        ADD: i18n.t("sys.add"),
        UPDATE: i18n.t("sys.modify"),
        DELETE: i18n.t("sys.delete"),
      },
      retentionDays: "",
    };
  },

  created() {
    this.loadData();
    this.loadRetentionDays();
  },

  methods: {
    loadData() {
      this.loading = true;
      const beginTimeValue =
        undefined !== this.queryData.beginTime
          ? this.queryData.beginTime.getTime()
          : undefined;
      const endTimeValue =
        undefined !== this.queryData.endTime
          ? this.queryData.endTime.getTime()
          : undefined;
      const params = {
        ...this.queryData,
        ...this.pageData,
        beginTime: beginTimeValue,
        endTime: endTimeValue,
      };
      getHmservicedataupdatelogPageList(params)
        .then((res) => {
          this.tableData = res.data;
          this.total = res.totalCount;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleDetail(id) {
      this.$refs.DetailForm.detailForm(id);
    },
    handleReset() {
      this.queryData = {};
      this.loadData();
    },

    loadRetentionDays() {
      getHmservicedataupdatelogRetentiondays().then((res) => {
        this.retentionDays = res;
      });
    },

    handleRetentionDaysSetting() {
      this.$refs.RetentionDaysModal.open(this.retentionDays, (days) => {
        putHmservicedataupdatelogRetentiondays({
          retentionDays: days,
        }).then(() => {
          this.$message.success(this.$t("sys.operation_success"));
          this.retentionDays = days;
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.retention-days {
  &__value {
    font-weight: bold;
    margin: 0 2px;
  }
}
</style>
